<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="65%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="header flex">
      <FormSearch
        :formFields="searchList"
        @search="Search"
        @reset="Search"
      ></FormSearch>
    </div>
    <a-table
      :columns="columns"
      :data-source="state.data"
      rowKey="s_u_id"
      :pagination="state.pagination"
      :loading="state.loading"
      @change="pageChange"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'user_info'">
          <div class="flex gap">
            <a-image :width="100" :src="record.user_info.img" class="image" />
            <div>
              <div>昵称：{{ record.user_info?.nickname }}</div>
              <div>手机号：{{ record.user_info?.mobile }}</div>
            </div>
          </div>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
    <script setup>
import { reactive } from "vue";
import { signUserList } from "@/api/subscribe";

import useModal from "@/utils/useModal";
const { visible, modalTitle } = useModal();
const emits = defineEmits(["select-goods"]);

const columns = [
  {
    title: "id",
    dataIndex: "s_u_id",
    width: 100,
  },
  {
    title: "用户信息",
    dataIndex: "user_info",
    width: 300,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
]; //表格展示的字段

const searchList = reactive([
  {
    type: "select",
    label: "用户类型",
    name: "type",
    value: 0,
    placeholder: "请选择类型",
    options: [
      { id: 0, name: "全部" },
      { id: 1, name: "真实" },
      { id: 2, name: "虚拟" },
    ],
  },
  {
    type: "select",
    label: "支付状态",
    name: "is_pay",
    value: 0,
    placeholder: "请选择",
    options: [
      { id: 0, name: "全部" },
      { id: 1, name: "是" },
      { id: 3, name: "否" },
      { id: 2, name: "失效" },
    ],
  },
  {
    type: "select",
    label: "状态",
    name: "status",
    value: 0,
    placeholder: "请选择",
    options: [
      { id: 0, name: "全部" },
      { id: 1, name: "中签" },
      { id: 2, name: "未中签" },
      { id: 3, name: "待公布" },
    ],
  },
]);
const state = reactive({
  id: null,
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  }, //搜索数据
});
const show = (model) => {
  modalTitle.value = "报名用户";
  state.id = model.subscribe_id;
  visible.value = true;
  getList();
};

const getList = () => {
  state.loading = true;
  signUserList({
    id: state.id, //申购id
    ...state.searchParams,
  }).then((res) => {
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  getList();
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
const Search = (values) => {
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  //搜索
  getList();
};
defineExpose({
  show,
});
</script>
    <style>
</style>
    